<template>
  <div>
    <!-- 已登录（也可能没商品） -->
    <div class="top">
      <van-nav-bar title="购物袋" :right-text="edit ? '完成' : '编辑'" @click-right="onClickRight" />
      <div class="bg">
        <img src="../assets/shopbag_bg.png" alt="" style="width: 100%;">
      </div>

      <!-- 商品列表 -->
      <div class="proList">
        <!-- 每一个商品 -->

        <van-swipe-cell v-for="(a, b) in pro">
          <div class="proList-item">
            <div style=" padding: 40px 5px">
              <van-checkbox @click="dx" v-model="a.checked"></van-checkbox>
            </div>
            <div style="padding-top: 5px;">
              <img :src="a.large_img" style="width:105px ; border-radius: 10px; height: 90px;" />
            </div>

            <div style="flex: 2; overflow-y: auto;padding-top: 10px;padding-left: 12px;">
              <div style="font-size: 16px;">
                {{ a.name }}</div>
              <div style="padding-top: 3px;">
                {{ a.enname }}</div>
              <div style="padding-top: 15px;">
                {{ a.rule }}</div>
            </div>

            <div style="">
              <div style="padding-top: 25px; text-align: center;font-size: 16px;padding-right: 5px;">
                ￥{{ a.price }}</div>
              <div style="padding-top: 30px; padding-right: 5px;">
                <van-stepper v-model="a.count" @change="changeNum(a)" theme="round" button-size="22" disable-input />
              </div>
            </div>

          </div>

          <template #right>
            <van-button @click="danshan1(b, a, sid)" square type="danger" text="删除" class="delete-button"
              style="height: 100%;" />
          </template>
        </van-swipe-cell>

      </div>
    </div>
    <!-- 用户未登录 -->


    <div class="tj">
      <van-submit-bar :price="total" :button-text="edit ? '删除' : '提交订单'" @submit="onSubmit">
        <van-checkbox @click="allcheck" v-model="allchecked">全选</van-checkbox>

      </van-submit-bar>
    </div>
  </div>
</template>
    
<script>
//import router from '@/router';
import { get, post } from '../request'
import { ref } from 'vue';
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    const onSubmit = () => {
      // 删除/提交订单  
      if (edit.value) {
        duoshan()
      } else {
        console.log('提交订单');
        const arr2 = ref([])
        pro.value.forEach((v) => {
          if (v.checked) {
            arr2.value.push(v.sid)
          }
        })
        router.push({ name: "Pay", query: { id: arr2.value } })
      }
    }

    //删除方法
    const del = async (sids) => {
      const res = await post('/deleteShopcart', {
        tokenString: JSON.parse(localStorage.getItem('tokens')),
        sids
      })
      console.log("删除", res);
      if (res.data.code == 7000) {
        findAllShopcart()
      }
    }
    //单删
    const danshan1 = (i, e) => {
      // 页面删除 / 数据删除
      console.log(i, e);
      pro.value.splice(i, 1)
      del(JSON.stringify([e]))
      console.log("单删",pro.value);
    }
    //多删
    const duoshan = () => {
      const arr1 = ref([])
      pro.value.forEach((v) => {
        if (v.checked) {
          arr1.value.push(v.sid)
        }
      })
      del(JSON.stringify(arr1.value))
      console.log("多删",pro.value);
    }

    //编辑
    const edit = ref(false)
    const onClickRight = () => {
      edit.value = !edit.value
    }
    //商品总价
    const total = ref(0);
    const num = () => {
      let aa = 0
      pro.value.forEach((v) => {
        if (v.checked) {
          aa += v.price * v.count
        }
      })
      total.value = aa * 100
    }
    //全选状态
    const allchecked = ref(false)
    const pro = ref([])
    //点击全选
    const allcheck = () => {
      pro.value.forEach((v) => {
        v.checked = allchecked.value
      })
      num()
    }
    //单选
    const dx = () => {
      num()
      for (let index = 0; index < pro.value.length; index++) {
        if (!pro.value[index].checked) {
          allchecked.value = false
          return
        }
      }
      allchecked.value = true
    }
    //修改购物车数量
    const changeNum = async (e) => {
      const res = await post('/modifyShopcartCount', {
        tokenString: JSON.parse(localStorage.getItem('tokens')),
        sid: e.sid,
        count: e.count
      })
      console.log("改数量", res);
    }

    //获取用户购物车数量
    const findAllShopcart = async () => {
      const res = await get('/findAllShopcart', {
        params: {
          tokenString: JSON.parse(localStorage.getItem('tokens'))
        }
      })
      console.log("购物车", res)
      res.data.result.forEach((v) => {
        v.checked = false
      })
      pro.value = res.data.result
    }
    findAllShopcart()
    return {
      onSubmit,
      onClickRight,
      edit,
      danshan1,

      total,
      changeNum,
      pro,
      allcheck,
      dx,
      allchecked
    }
  }
};

</script>
  
<style lang="less" scoped>
.van-submit-bar {
  bottom: 50px;
}

.proList {
  padding: 10px 10px 100px;

  .proList-item {
    flex: 1;
    overflow-y: scroll;
    display: flex;
    height: 100px;
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: 10px;
  }
}

// .bg{
//   height: 160px;
//   width: 200px;
//   // background-color: coral;
// }
</style>
    